﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" style="height:100%">
<head>
	<title>要員計画検索</title>
	<jsp:include page="../basePage/head.jsp" />	 
    <jsp:include page="../basePage/jqplot.jsp" />   
    <script src="./js/util/globalajaxevent.js"></script>
    <script src="./js/util/lockGridColumn.js"></script>
    
	<style type="text/css">				 					
		.hide{display:none}  
	</style>
 	 <style>
		    .ui-datepicker-calendar {display: none;}
   	</style>
		    
	<script>
	 $(function() {		
		 
		 var exportExcel = '${exportExcel}';
		 if (exportExcel=='true'){
		 	$('#buttonExport').show();
		 }else{
		 	$('#buttonExport').hide();
		 }
		 
		//设置默认日期
		//开始日期：上个月 结束日期 当前日期
		var toDate = getCurrentMonth(); 
				
		initDatepicker('dateTo',toDate);
	
		$('#buttonSearch,#buttonExport').button();		 			
	 
		$( "#buttonSearch" ).button().click(function( event ) {	 
			
			$('#tittleGrid,#masterGrid,#chartdiv,#detailGridA,#detailGridB').empty(); 

			
			 $.ajax({
			        type: "POST",
			        async: true,
			        url:"calculateQuery!refreshChartData.action",
			        data:$('#dataForm').serialize(),			         
					success: function (data) {
						
						if (data.chartData.TableTittle.length==0 ||
								data.chartData.TableMaster.length==0 || 
								data.chartData.TableDetailA.length==0 ||
								data.chartData.TableDetailB.length==0 ){
							
							 $( "#noResult" ).dialog({modal:true});
								return;	
								}

						
  						outputGrid('tittleGrid',data.chartData.TableTittle,"計算関連条件設定",true);
						outputGrid('masterGrid',data.chartData.TableMaster,"案件対応必要リソース予想状況",true);
 						outputGrid('detailGridA',data.chartData.TableDetailA,"案件毎の発生予想（枚数）",false);	 
						outputGrid('detailGridB',data.chartData.TableDetailB,"案件対応必要リソース（人数）",false); 
						outputChart('chartdiv',data);						
						
				      	var width=$("#detailGridA").width();     	  
				     	$("#detailGridA_datagrid").setGridWidth(width);
				     	width=$("#detailGridB").width();
				     	$("#detailGridB_datagrid").setGridWidth(width); 
				     	
				     	var width=$("#tittleGrid").width();
				     	$("#tittleGrid_datagrid").setGridWidth(width); 

				     	width=$("#masterGrid").width();
				     	$("#masterGrid_datagrid").setGridWidth(width); 

				     	setColumnsNoSort("#tittleGrid_datagrid");
				    	setColumnsNoSort("#masterGrid_datagrid");
				     	setColumnsNoSort("#detailGridA_datagrid");
				    	setColumnsNoSort("#detailGridB_datagrid"); 
						
				  	  	setFrozenColumns("#detailGridA","#detailGridA_datagrid",5);
				  	  	setFrozenColumns("#detailGridB","#detailGridB_datagrid",5);
 					},
			        error: function (err) {
						alert(err);
			        }
				});			 
		 });
		
		$( "#buttonExport").button().click(function( event ) {
			$('#dataForm').attr('action','calculateExport!export.action').submit();
		});
	});
		
	function outputChart(target,data){
		$('#' + target).empty();
		if(data == null ||
		   data.length==0 || 
		   data.chartData ==0 ||
		   data.chartData.EmpCount ==0 ||
		   data.chartData.MaxDAwayEmp ==0 ||
		   data.chartData.MaxWorkEmp ==0 ||
		   data.chartData.AvgDAwaySpareEmp==0)  return;
		    
		$.jqplot(target, 
				  [data.chartData.EmpCount,
				   data.chartData.MaxDAwayEmp,
				   data.chartData.MaxWorkEmp,
				   data.chartData.AvgDAwaySpareEmp,], {		    
				    // Turns on animatino for all series in this plot.
	        		animate: true,
	        		// Will animate plot on calls to plot1.replot({resetAxes:true})
	        		animateReplot: true,
		     		//动画用      
		    		axesDefaults: {pad: 0},		            
	        		//图例
		        		legend:{show:true,
		        			placement : "outsideGrid",
		        			location: 's', 
		        			fontFamily: 'MS PGothic',
		        			fontSize: '8pt',
		        			renderer: $.jqplot.EnhancedLegendRenderer,
		        			rendererOptions: {numberColumns: 4}
		        			},			     
		     		//柱状图
		    		series:[
 								{label: '在籍見込み',color:'#ff0000',markerOptions: {show: true, style: 'filledDiamond '}},
							{label: '②契約必要要員数（ＭＡＸ対応）',color:'#84E0E0'},
								{label: '①全案件対応必要要員数 ',color:'#808080',showMarker:false,lineWidth: 1},
							{label: '③契約必要要員数（平均対応）',color:'#BCF808'},    																								
		                    {xaxis:'x2axis', yaxis:'y2axis'
		                    },
		                    {rendererOptions: {animation: {speed: 2000}}
		                    }],
		             //折线图
		    		seriesDefaults: {rendererOptions: {
		    	          smooth: true
		            }},		  
		     		axesDefaults: {tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        				   tickOptions: {showGridline: true,angle: 0,fontFamily: 'MS PGothic',fontSize: '10pt'}								
		    				},  
	  	    		axes: {xaxis: { renderer: $.jqplot.CategoryAxisRenderer},
		      			   /* x2axis: {renderer: $.jqplot.CategoryAxisRenderer,tickOptions: {show: false}}, */
			      		   yaxis: { min:280,max:730,tickInterval:50 ,tickOptions:{formatString:'%.0f人'} },
		      			   /* y2axis: { autoscale:true,min:0,max:800,tickInterval:200 ,tickOptions: {showGridline: true}} */
		    			  	},
		 			//mark上高亮    
	     			highlighter: {
	     				show: true,
	     				sizeAdjust: 7.5,
	     				tooltipAxes: 'y'
	     				},
	      			//鼠标移动 显示坐标位置数据
	      			cursor: {show: false},		      				     			
		  });
	};
	  
	function outputGrid(target,data,caption,atuowidth){		
  		$('#' + target ).empty();  		  	
		if(data == null || data.length==0  ) return;
		
   		var row =[];
		for(var i=0;i<data.length  ;i++){				 							
			row.push($("<tr></tr>"));				 
		}  ;
		
	   	$('#' + target).empty().append('<table style="float:inherit;width:500px" id=' + target + '_datagrid><tbody></tbody></table>');
		var table = $('#' + target + ' tbody');

	    var j=0;
  		$.each(data,function(key,value){
  			var index=0;
  			$.each(value,function(k,v){  			  			
  				var th = $("<th id =" + index + " nowrap='nowrap'></th>");
	  				var td = $("<td nowrap='nowrap'></td>");  		
  	  		    if (j ==0 ){		
					th.append(v);
  	  	        	th.appendTo(row[j]);
  	  	        }
  	  		    else{					  	  				
  	  				td.append(v);
  	  				td.appendTo(row[j]);
  	  		    }
  	  	    	index++;
  			});  			
  			j++;
  		});
  		for(var i=0;i<row.length;i++){
  			row[i].appendTo(table);			
		};		
		
		
		 var ColModel='';
		  var Colwidth = 10;
		  var align ="left";
		  
		  for(var i=0;i<data[0].length  ;i++){				 							
		   if ( ColModel.length>0){
			   ColModel += ',';} 
		
		       if (target== "tittleGrid"){
			       if (i==0){
			    	   Colwidth = 220; 
			    	   
			       } else if (i==1) {
			    	   Colwidth =86;
			    	   align ="right";
			       }
		       } else if (target== "masterGrid") {
		    	   if (i==0){
			    	   Colwidth = 180;
			    	   
			       } else  {
			    	   Colwidth =36; 
			    	   align ="right";
			       }
		       }
		       else if (target== "detailGridA" ||target== "detailGridB" ) {
		    	   if (i==0){
			    	   Colwidth = 30;
			    	   align ="center";
			       }else if (i==1){
			    	   Colwidth = 50;
			    	   align ="left";
			       } else if (i==2){
			    	   Colwidth = 130;
			    	   align ="left";
			       }else if (i==3){
			    	   Colwidth = 60;
			    	   align ="left";
			       }else if (i==4){
			    	   Colwidth = 100;
			    	   align ="center";
			       }else if (i==5){
			    	   Colwidth = 70;
			    	   align ="center";
			       }    else  {
			    	   Colwidth =34; 
			    	   align ="right";
			       }
		       }
		  
			   ColModel += '{name:"' +i +'", index: "' + i+ '", width: ' + Colwidth+', align: "' + align +'" ,sortable:false} '; 
		  }  ;
		  
		  
		//tableToGrid(target + ' table',{
		tableToGrid('#' + target+"_datagrid",{
  			//datatype: "local",  
  			autoWidth:atuowidth,	  			  			
  			height: "100%",
         	caption: caption,
			shrinkToFit: false
			,colModel:eval("([" + ColModel + "])")
			,gridComplete:function(){				
				 paintColor(target);
				 fiexedRow(target);
			 }
		});
	};	
	  	
	function paintColor(target){  				
  		$('#' + target + '_datagrid tr').each(function(){
  			
  			if (target =="masterGrid"){
  				$(this).children("td").filter(function(index) {    				  					
					return !isNaN(Number($(this).text())) 
						&& $.trim( $(this).text())!='' 
						&& parseFloat($(this).text())<=0;  				  				
				}).css('color', 'red');
  			}
  			
  			if (target =="tittleGrid" || target =="masterGrid"){
  				$(this).children("td").eq(0).nextAll().css("text-align",'right');
  			  			
				var v=$(this).children("td:first").text();
				var color='';
				if (v=="在職オペレータ数 「本番+新規」" ||
					v == "予想満負荷稼働率" ||
					v == "欠勤率" ||
					v == "他非本番" 
					) {
		    		color ="#ff99cc";
		    	}else if (v=="本番エントリへ投入できるOP数「総-新規」"){
		    		color = "#7FFFFF";
		    	}
		    	else if (v=="①全案件対応必要要員数 （欠勤・テスト等を除く）"  || v=="①リソース状況「不足/余り」"  ){
		    		color = "#eaeaea";
		    	}else if (v=="在籍見込み"){
		    		color = "#ffcc99";
		    	}else if (v=="②契約必要要員数（ＭＡＸ対応）（欠勤・テスト等の不稼働を含む）" ||v=="②リソース状況「不足/余り」"){
		    		color = "#84E0E0";
		    	}else if (v=="③契約必要要員数（平均対応）（欠勤・テスト等の不稼働を含む）" || v== "③リソース状況「不足/余り」"){
		    		color = "#BCF808";
		    	} 
				
				$(this).children("td:first").css("background",color);			
			
  			  				 
  			}
  			else if(target.substring(0,6)=="detail")
  			{
  				//alert($(this).children("td").eq(0).text());
		  		var td = $(this).children("td");
  				
  				if (td.eq(0).text() ==  "曜日"){
  					td.css("text-align",'center');
  					
  		    		td.css("background","#ffffe1");	
  				}else{
  				 td.eq(4).css("text-align",'center');  			
 				 td.eq(5).nextAll().css("text-align",'right');
  			   }
  				
  				//暂时不要
  				/* var caseName =td.eq(1).text().substring(0,3) ;
  				if (caseName == "KPT" ||
  					caseName == "WBM" || 
  					caseName == "WBP" ||
  					caseName == "TK" ||
  					caseName == "SYN" ||
  					caseName == "RS" ){
  				 
  					td. css("background","#ffff00");	
  					} */
 			}
		});	
  		
  		$('#' + target + '_datagrid tr:eq(1) td').each(function(){
			
			var v = $(this).text();
				if ( v=="土" || v=="日"){ 
  		    		$(this).css("background","#ff99cc");
  		    }
  		});	  			
	}
	  	
	function fiexedRow(target){					
		$('#'+target+'_datagrid  tr').each(function(){
  			var v=$(this).children("td:first").text();
  			if (v=='曜日'){
  				if( $(this).index() !=1){		  		
   					var rowid=$(this).attr('id');
  					var rowData = $('#'+target+'_datagrid').jqGrid ('getRowData',rowid );
  					$('#'+target+'_datagrid').delRowData(rowid); 
  					$('#'+target+'_datagrid').jqGrid('addRowData', undefined, rowData, "first");  					
  				}
  				return;
  			}
		});
	} 			  	
	</script>

</head>
<body >

<s:form id="dataForm" theme="simple" >			
	<table style="white-space:nowrap">
		<tr>
		 	<th>時間</th>
		 	<td ><s:textfield id="dateTo" name="dateTo" key="value" label="开始日"  cssClass="datebox"/></td>
			<td width=30></td>
			<td><a id="buttonSearch" href="#" class="button" >検索</a></td>		
			<td><a id="buttonExport" href="#" style="width:100px" class="button"  >エクスポート</a></td>	
			<td>
				<span id="myIndicator" class="hide" >
					<img  width=25 height=20 src="./img/ajax-loader.gif" alt="ロード中..." />ロード中....
				</span>
			 </td>		
		</tr>
	</table>
</s:form>

<hr>

<div id="dataContainer" style="position:absolute;overflow: auto!important;top:35px;bottom:0px;width:100%;">  			
		<div id="tittleGrid"   style="margin-left:10px;margin-right:4px;width:30%;float:left;min-width:200px"></div>		
		<div id="masterGrid"   style="margin-left:4px;width:60%;float:left ;min-width:50px"></div>
		<div id="chartdiv"  class="chart" style="height:250px;"></div>
		<div id="detailGridA" class="grid"></div>
		<div id="detailGridB" class="grid"></div>
		<div id="noResult" title="メッセージ" style="display:none;">
 			<p>该当する検索结果がありません。</p>
 			<p>别の条件でもう一度検索してください。</p>
		</div>
 </div> 

 


</body>  
</html>